"use client"

import { useState, useEffect } from "react"

interface WeatherData {
  main: {
    temp: number
    temp_max: number
    temp_min: number
  }
  weather: Array<{
    description: string
  }>
}

export function Weather() {
  const [weatherData, setWeatherData] = useState<WeatherData | null>(null)

  useEffect(() => {
    const fetchWeatherData = async () => {
      try {
        const response = await fetch(
          `https://api.openweathermap.org/data/2.5/weather?q=London&appid=${process.env.NEXT_PUBLIC_OPENWEATHER_API_KEY}&units=metric`
        )
        const data = await response.json()
        setWeatherData(data)
      } catch (error) {
        console.error("Error fetching weather data:", error)
      }
    }

    fetchWeatherData()
  }, [])

  const content = (
    <div className="flex flex-col text-white">
      <div className="text-2xl font-light">{weatherData?.main?.temp}°</div>
      <div className="text-sm text-gray-400">{weatherData?.weather?.[0]?.description}</div>
      <div className="mt-2 text-sm">
        H: {weatherData?.main?.temp_max}° L: {weatherData?.main?.temp_min}°
      </div>
    </div>
  )

  return (
    <div className="flex flex-col select-none">
      <div className="rounded-2xl p-4 backdrop-blur-xl bg-black/10">{content}</div>
      <div className="text-[13px] text-white/80 mt-1 text-center">Weather</div>
    </div>
  )
}
